Creating Windows Forms Applications with Visual Studio and C# 
CSCE A331 


Visual Studio on a Windows platform gives you a multitude of classes to easily create 
typical Windows GUI applications. If you elect to use these features, currently a C# 
application will only run on a Windows machine. There is similar functionality for C# 
GUI applications under Mono. In this lecture we will present just the basics to create 
some simple Windows apps. 


Although it is possible to create windows applications purely in a textual environment, 
we will instead make use of the Visual Studio interface which lets us graphically drag 
and drop to determine the layout of our program. The VS environment will then generate 
the necessary code for us to perform the layout. 


The following screenshots were created in VS 2013. If you have a different version, 
some windows and/or content may have changed but the basic process is the same. To 
create a Windows Forms Application, start Visual Studio and create a new Visual C# 
Project. Make sure you select a Windows Application as the template. 
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Solution: Create new solution 


Solution name: WindowsTest Create directory for solution 
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You will be presented with a blank form. This document assumes that you have the 
Toolbox pane visible on the left of the screen and the Properties on the right. These panes 
can be moved around and hidden. This pane contains common controls which make up 
the elements on the form. The layout is shown below: 
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A control is a component with a visual representation. The Control class in the 
System.Windows.Forms namespace is the base class for the graphical objects on the 
screen. All controls are derived from the base control. Examples of controls include: 
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A Formis atype of ContainerControl. It can contain other controls and we can 
add controls to it. 


In this document we will only discuss a few controls: Buttons, Labels, TextBox, 
ProgressBar, and PictureBox. A Button is just like it sounds, a button we can press and 
when it 1s pressed some code is invoked. A Label is a way to output some text on the 
form. A TextBox can be used to output data and provide a way for the user to enter text 
to the program (although a label 1s better for data that is purely output only). A 
ProgressBar displays a graphical bar of progress for some slow event. Finally, a 
PictureBox is used to load and display an image. Please refer to the VS documentation 
for details about the other controls. 


Let’s make a simple Windows application that will allow the user to enter a number into 
a TextBox and press a button. Upon pressing the button we will output if the number is 
even or odd into a label. 


First, select the form by clicking on it. In the Properties Window, you can click and 
modify various properties of the form. By default, itis called Form1. Scroll through 
the properties; there are many available to change, such as the size, icon, width, locked, 
etc. One we can change is the title bar shown with the form. Here we change the title bar 
of the form to “Even Odd Tester” by changing the Text property. 
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This changes the title of the form itself: 
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At this point you may wish to grab the “size” handles around the form, and resize it to the 
dimensions that you like. 


To add controls to the form, select the control you want from the Toolbox on the left. 
Then click and drag in the form window in the location you want the control to go. If 
you select the Pointer tool, you can select existing items on the form and move them 
elsewhere. You can also click and resize the control on the form. Try dragging a button 
onto the form: 
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Click the button on the form and change its Name property to “btnEvenOdd”’. This is 
setting the name of the variable used to reference the button object from its default of 
“Buttonl”. Also change the button’s text property to “Even or Odd”. You should see the 
change to the text field take place on the form: 


Even or Odd 
In the same fashion as the button, add a label to the form and name it “IblResult” and set 
its Text field to “Enter data’. 
Also add a TextBox to the form, name it “txtNumber’” and delete the contents of the Text 
field. As you add the controls to the form, you will see vertical lines that help you align 


controls to each other. 


The result should look something like this: 
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At this point you should be able to execute the program you have created so far by 
clicking on the run button, shown as an arrow: 


» Start - Debug 


Your app should execute allow you to enter data in the textbox and press the button. 
However, nothing will happen because no code is associated with these objects. We will 
add code to them shortly. A Windows application is based upon event-based 
processing. The application is waiting for some event to happen and reacts to those 
events rather than firing off sequential statements and exiting when they are done. At this 
point it may be useful to see the actual code that has been generated so far. By dragging 
our controls on the Form, Visual Studio has generated the code that would correspond to 
what is visually shown on the screen. You can look at the code at any time by right- 
clicking on the “Form1.cs” name and select “View Code” to see the C# code: 
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InitializeComponent(}; 
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} 


You can see that Visual Studio has generated some code for you. There is more, but it’s 
not generally made visible to the programmer. 


To go back to the graphical form designer, click on the “Form1.cs [Design]” tab . 
To add code behind an event, click the control you are interested 1n and then click on the 


events button (indicated by a lightning bolt) of the properties window. In this case, we 
would like to add an event to the button, so select the button on the form and then events: 
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The window shows all of the events supported by Windows. For example, the Click 
event is invoked when the button 1s clicked. The DragDrop event is invoked if an item is 
dragged and dropped on the button. You can scroll through the list to see the myriad of 
events. 


Select the Click box and enter “btnEvenOddClicked”. This defines a method named 
“btnEvenOddClicked” that will be invoked when the button 1s clicked. Immediately 
Visual Studio will bring you to an empty code skeleton that it generates for the method: 


private void btnEvenOddClicked(object sender, EventArgs e) 
1 


} 


The sender parameter is the object that invoked the event. In most cases, it is the actual 
object that was selected by the user, in this case, the button object that was clicked. The 
EventArgs parameter passes object-specific parameters to the event being handled. For 
example, in a drag-drop event this might indicate the object being dropped. We’ll see an 
example of using the event args later. The btnEvenOddClicked() method is actually used 
as a Delegate for the System’s Event Handler, but these details are somewhat hidden by 
the Visual Studio IDE. 


Another, faster way to define an event is to simply double-click on the control in the 
design form. This will add code for a default event. For a button, this is click. The 
default event will vary for other controls. 


For example, double-click on an empty part of the form itself: 
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This adds the default event of Form Load: 


private void Forml Load(object sender, EventArgs e) 


{ 


} 


Any code we enter in here is executed when the form is loaded for the first time. In our 
case, this corresponds to when the application initially starts. Try adding the following 
code: 


private void Forml lLoad(ob ect sender, MventArgs ¢) 


{ 
this .btnkvenOdd.BackColor = Color. LavenderBlush; 


MessageBox.Show("This app tells if a number is even or odd.", 
"Epp iniro", 
MessageBoxButtons.OK, 
MessageBoxiIcon.Information) ; 
} 
This code will set the background color of the button to LavenderBlush upon startup. It 
will also display a message box with the information “This app tells if a number is even 


or odd” with the title “AppInfo” and display an OK button and an “Information” icon: 


@ This app tells if a nurnber is even or odd 








Now, let’s add some code back to the button click event. We would like to take whatever 
data is entered in the textbox, convert it to an Integer, and then change the label’s text to 
indicate if the integer is even or odd. The following code will do all of this. In this case 
we have added a try/catch block in the event of an error converting the integer (but ignore 
what kind of error may have occurred): 


private void btnEvenOddClicked(object sender, EventArgs e) 


{ 
int 1; 
try 
{ 
i = Convert. ToInt32(txtNumber. Text) ; 
if ((i % 2) == @) 
lblResult.Text = "Even"; 
} 
else 
lblResult.Text = "Odd"; 
} 
} 
catch (Exception err) 
{ 
lblResult.Text = "Error, invalid number"; 
} 
} 


Here is a screen shot of an output case: 





Try experimenting with other event handles such as MouseEnter or MouseLeave. 


Before we leave this program, let’s look at how to use the ProgressBar control. Adda 
ProgressBar control to the form, as shown below: 


fog Even Odd Tester =» [> | fesse | 


Enter Data. 





By default it will be given the name progressBar1. In its properties window, set the 
Minimum to 0 and the Maximum to 20 and the Step to 1: 


Maximum 20 


Maximum Size 0 0 
Minimum 0 

Minimum Size 0 0 
Modifiers Private 
RightT oLett No 
RightToLettLayout False 

Size 286, 23 
Step 1 


The min and max specify the range of data values possible on the progress bar. Step 
indicates how much of the progress bar will be updated at a time. In this case, we create 
20 progress bar intervals. If we set step to 2, we would only have 10 intervals. By 
setting the “Value” data member, we control how much of the progress bar 1s filled in. 


Normally, we would set the progress bar value during some long-running procedure so as 
to give feedback to the user that the program is operating and give them an idea how 
much longer to wait. In our program we have no such long-running procedure, so we 
will just pretend we have one. In our case, we will increment the value of the progress 
bar each time we click on the button. 


In the button click event code, add the following at the bottom: 


progressBar1.Value += 1; 


Every time we click the button, the progress bar’s value will be incremented. The value 
Starts at zero. 


If we run the program and click the button a few times we should see the progress bar 
move forward: 





If we click the button more than 20 times we will have an error as we try to advance the 
progress bar’s value beyond the maximum of 20. At this point we can poke around in the 
debugger to help find problems: 


: 


} ff progressBar1.Value 20 & 
~ ArgumentOutOfRangeException was unhandled 


abe void Form1_Load(object An unhandled exception of type ‘System.ArgumentOutOfRangeException’ occurred in System.Windows.Forms.dll 
thie. Wiek vest Beckicior Additional information: Value of '21' is not valid for ‘Value’. ‘Value’ should be between ‘minimum’ and ‘maximum’. 


Click the red stop button to end debugging: 
a ¢ 


We could fix this bug in many ways; by allowing the progress bar to not be incremented 
past 20, or perhaps reset the progress bar to O 1f we hit 20: 


if (progressBar1.Value 
progressBar1.Value 

else 
progressBar1.Value += 1; 


Typically we want the progress bar to update automatically. A timer is an easy way to do 
this, as it is a simple way to implement a countdown that will run in a separate thread. To 
use the timer drag it to the form. It 1s invisible in the sense that you won’t see it when the 
program runs, but is visible at design time at the bottom of the form editor. 
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The timer has an “Interval” property which is the number of milliseconds that elapse 
before the timer goes off. In our application, set the interval to 500 which corresponds to 
half a second. Set enabled to “true” so the timer will start when the form loads. 


Double-click the timer to add its default event, or under the event listing, double click on 
“tick” which is the event to handle what should happen when the timer goes off. 


Copy in the progress bar update code: 


private void timer1_Tick(object sender, EventArgs e) 


{ 
if (progressBar1.Value == 20) 
progressBar1.Value = Q; 
else 
progressBar1.Value += 1; 
} 


Note that the timer stays enabled unless we set the “enabled” property to false. 
Debugging 


Visual Studio has a full-featured debugger. To toggle a breakpoint, click in the grey area 
to the left of the code. This creates a red circle that highlights the line of the breakpoint. 


j- private void btnEvenOddClicked(object sender, EventArgs e) 
i 
2 


try 


{ 
1 = Convert. ToInt32(txtNumber.Text); 
: if (({1 4 2) == 6) 


If we run in Debug mode then the program will stop when it hits a breakpoint and we can 
step through the code and inspect variables. 


ANALYZE WINDOW 
I + & & ¢ 


Stack 





Step Over (F10) 











o©@ 
ra 


Te ote nl Tolmtria2 ‘J 


Lee 
Tt a Lm | 


> is 


(ewt if" 


tt Number ioystem. Windows.Forms. TextBox, Text: 34} 





lblResult.Text = "Ewen"; 


Drawing Graphics 


We can draw graphics in C# much like we draw graphics using Java. To play with some 
graphics, create anew Windows Application project. In the form’s properties, go to the 
events and add an Paint method for the Paint event: 


PaddingChanged 
Paint paint 
ParentChanged 


The paint method will now be invoked whenever the form is redrawn. Recall that this is 
really used as a Delegate within the System’s own Paint events and this method is passed 
to it so that the system knows what to invoke when a paint event occurs. By placing the 
drawing code in the Paint event it will always be updated correctly (e.g., 1f we placed the 
code somewhere else and the window was obscured, it may not be redrawn correctly 
when the obscuring item is moved out of the way). 


We can now put code here that will draw whatever we like on top of the form. Just like 
in standard graphics format, the origin is the upper left corner. The x coordinates increase 
to the right, and the y coordinates increase down toward the bottom. 


Here is some sample code we can add to the paint method to draw various shapes on the 
screen: 


private void paint(object sender, PaintEventArgs e) 


a: 
// Get the graphics object for the event 


Graphics g = e.Graphics; 


// New pen color 

Pen red = new Pen(Color.Red, 3); 

// Draw a rect at Width=5@, Height=80 at coordinate 10,20 
g.DrawRectangle(red, 10, 20, 50, 8@); 


// Ellipse drawn within bounding rectangle at 50,10 
g.DrawEllipse(new Pen(Color.Purple), 50, 10, 40, 30); 


// Brush = solid, hatched, texture... 

Brush bru = new SolidBrush(Color.LawnGreen) ; 
// Fill in the rectangle 
g.FillRectangle(bru, 100, 100, 10, 20); 


// Draw part of a pie 
g.FillPie(new SolidBrush(Color.Green), 130, 20, 100, 100, 30, 60); 


First, we capture the Graphics object from the event arguments. The Graphics object 1s 
attached to the Form, so anything we draw on the graphics object will be displayed on the 
entire Form. We could attach code to the Paint event of specific controls to only paint 
within those controls, if we wish. 


Next, we create a red pen and draw a rectangle using that pen. The rectangle takes the 
coordinates of the upper left corner then the width and height. 


An ellipse is drawn in a similar fashion, by specifying the bounding rectangle that holds 
the ellipse. 


Next we draw a solid rectangle using a Brush object. The Brush in this case is a solid 
color, but it is possible to create brushes that are hatched, texture, etc. Finally we draw 


part of a Pie slice using a green brush. 
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There are many other drawing tools available; see the text and online help for more 
details. 


Working with Images 


You may have a homework assignment dealing with images, so let’s say a little bit about 
how to process and manipulate bitmap images. 


First, create anew Windows Application project and add a PictureBox control and a 
Button to it. Set the text of the button to “Test”. By default, the PictureBox object will 
be named pictureBox1! and the button will be named button]. 
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Now, select the pictureBox1 control and go to its properties. Find the image property in 
the list: 
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Click the “...”’ which will bring up a list of resources. Click on “import” and a file dialog 
to search for an image should be displayed. Find some image on your system. It should 
then be displayed inside your pictureBox1 control. You may need to resize the control so 
that the entire image fits. In the picture below, I have selected my shadow selfie: 


“4 


. 
: 

a. 

{ 

us 
2 > 

— 
<7 
7 


Sak 
La 
Px 
4° 
* 
. t. 





You can change the “SizeMode” property to change how the image is shown in the 
picturebox. 


Normal 
Tag Normal 
UseWartCursor 










Stretchl mage 
Choose Image... Autosize 
Centerlmage 


SizeMode Bee 


Controls how the PictureBox will handle image 
placement and control sizing. 


At this point you can run the application and it will display an image on the form. This is 
all you would need to do if you want to include static images in your application. The 
image data will be stored as part of the assembly of the executable, so you don’t need to 
include the actual image file with your application. 


Let’s show how we can access individual colors of the image. Add the following code to 
the Button Click event of the “Test” button: 


private void buttonl Click(object sender, System.EventArgs e) 
{ 

// Get bitmap of the image 

Bitmap bmp = new Bitmap (pictureBoxl.Image) ; 

in 43 

Color Cc; 


Jj) Gee. calor Values Tor first line 
ror (1-07 2.-<— bmpsWircrh, ar) 
{ 
c = bmp.GetPixel(i, 0); // Get pixel at coordiate i,0 


Console Writeline ("AL coordinate ” a + "0. ™ + 
*" Colors Red=" + ¢c.R + " Green=" + o,G + " Blue=" + ©.B); 


This code will output the Red, Green, and Blue values of each pixel on the first horizontal 
line of the image when we click the button. The output will show up in the Output 
window, if in debug mode. The output window is normally selected as one of the tabs in 
the bottom right window pane (although it may be moved around, depending on your 
configuration of Visual Studio. If you’re not sure where it is, you can find it from the 
V)lew menu). 


We can also set the color of pixels if we like. Consider the following code: 


private void button1 Click(object sender, EventArgs e) 


{ 
Bitmap bmp = new Bitmap(pictureBox1. Image) ; 
int 1; 
Color «Cc; 
// Set colors of first vertical line to a gradient of Green 
for (i = 03; i < bmp.Height; i++) 
{ 
// FromArgb takes Red, Green, Blue 
// Scale green from @-255 depending on position in height 
c = Color.FromArgb(@, i * 255 / bmp.Height, 0); 
bmp.SetPixel(@, i, Cc); 
bmp.SetPixel(1, i, c); 
bmp.SetPixel(2, i, c); 
} 
// For our changes to take effect, we must set the image property 
pictureBox1.Image = bmp; 
} 


This code will get a color of green and set it to each pixel in the first vertical line of the 
image. Note that we must reset the Image property to our bitmap at the end for the 
changes to take effect: 





There is a lot more to cover regarding C# and particularly in developing Visual Studio 
Windows applications, but hopefully we have covered enough to give you an idea about 
the language and the development environment, and enough to complete the homework 
assignments. 


Intro to Windows Presentation Foundation, WPF 


Windows Presentation Foundation, or WPF, has been billed as the successor to Windows 
Forms. It lets you develop applications in a way similar to Windows Forms if you wish, 
or to use a declarative style. The WPF model uses XAML, which stands for Extensible 
Application Markup Language, and is used with Windows 8, Windows Phone, 
Silverlight, and the Xbox, so if you learn it then you can develop on many different types 
of platforms. 


Some advantages of using XAML and WPF over Windows Forms: 


Enforces separation of GUI display code from underlying logic code 
Ability to use graphical tools like Expression Blend to make fancy UI’s 
Ability to use DirectX for better graphics performance than GDI+ 
Built in support for 3D graphics 

Property Inheritance 

Styles 

Templates 

Broad platform support 


The main disadvantage is the learning curve is a bit steep and somewhat different if you 
are used to making GUI apps with Swing or Windows Forms. If you have done modern 
HTML, XML, or JavaFX then pieces will be more familiar to you. 


Here we give only a brief introduction to some of the concepts in WPF. 


To make a WPF Windows Application, select WPF Application when you make a new 
project: 
re | WPF Application Visual C# 


We can add controls to the form in the designer, a lot like we did with Windows Forms. 
Here 1s a form with a button, textbox, and label. 





By default these controls are placed inside a Grid. You can do a few handy things like 
lock an edge of a control for resizing. Here the button is locked to the left and right sides 
of the form: 
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When we resize the form, the button will resize with it. 


If you look in the XAML window you can see the code that 1s generated to display the 
controls. In my case it looks like this: 


<Window x:Class="WpfApplication2.MainWindow" 
xmins="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmilns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
Title="MainWindow" Height="350" Width="525"> 
<Grid> 
<Button Content="Button" Height="23" Margin="12,73,12,0" Name="button1" 
VerticalAlignment="Top" /> 
<Label Content="Label" Height="28" Margin="202,29,241,0" Name="labeli" 
VerticalAlignment="Top" /> 
<TextBox Height="23" HorizontalAlignment="Left" Margin="81,120,0,0" 
Name="textBox1" VerticalAlignment="Top" Width="120" /> 
</Grid> 
</Window> 


The same code in C# 1s quite a bit longer and would require creating a Button object, 
label object, setting their location, etc. (although this could be done for you by the Visual 
Studio Designer). You can write your code directly in the designer in XAML, which is 
often necessary to get the precise control you want, or use the designer. 


If you like you can add events to the controls just like we did with Windows Forms. 
Here is an event for the button click. Double-click it or click on the lightning bolt icon to 
see the list of event handlers: 
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If you change the name of the control you may need to save the file so you can use 
IntelliSense in the coding window. 


Simple code: 


private void button1_ Click(object sender, RoutedEventArgs e) 
{ 


} 


txtTest.Text = "You clicked the button"; 


You have even more flexibility designing the GUI 1f you use a tool like Microsoft’s 
Expression Blend. It will create a project that you can open in Visual Studio and 1s 
intended to be used together (changes in one are reflected in the other). Expression Blend 
is good for designing the GUI but not so great for the coding part, while Visual Studio 1s 
great for coding but lacks some of the graphical tools in Expression Blend. 


As a little taste, you can experiment with the Transform property for a control to rotate, 
flip, resize, etc. In the traditional model you would have had to write code to do all of 
this yourself. 


There is more flexibility in WPF by writing XAML code. Here we create a StackPanel 
of controls: 


<StackPanel> 
<TextBlock Margin="2@">Welcome to XAML</TextBlock> 
<Button Margin="10" HorizontalAlignment="Right">OK</Button> 
<Label>Hello there</Label> 

</StackPanel> 


We have lots of layout controls; the Stackpanel is one of the simpler ones. Here is a 
Scroll Viewer which adds scroll bars to the items inside: 


<ScrollViewer HorizontalScrollBarVisibility="Auto" 
VerticalScrollBarVisibility="Auto"> 

<StackPanel> 
<TextBlock Margin="2@">Welcome to XAML</TextBlock> 
<Button Margin="10" HorizontalAlignment="Right" >OK</Button> 
<Label>Hello there</Label> 

</StackPanel> 

</ScrollViewer> 


The Canvas control lets us specify the distance between their left, top, right, bottom, and 
the canvas edge. 


<Canvas> 
<Button Content="TopLeft" Width="85" Height="30" 
Canvas. Top="20" Canvas.Left="20"/> 
<Button Content="TopRight" Width="85" Height="30" 
Canvas. Top="20" Canvas.Right="20"/> 
<Button Content="Bottom" Width="85" Height="30e" 
Canvas.Bottom="20" Canvas.Left="200"/> 
</Canvas> 


So we can control the layout using XAML somewhat like HTML; we also have some 
built in functions for animations and varying properties over time. 


We can do this by adding triggers that run a storyboard. Here is an example to spin a 
button: 


<Window. Background> 
<RadialGradientBrush> 
<GradientStop Color="White" Offset="0@"/> 
<GradientStop Color="Blue" Offset="1.2"/> 
</RadialGradientBrush> 
</Window. Background> 
<Window. Resources> 
<Style TargetType="Button"> 
<Setter Property="Width" Value="150"/> 
<Setter Property="Height" Value="60"/> 
<Setter Property="RenderTransform" > 
<Setter.Value> 
<RotateTransform Angle="0" CenterX="75" CenterY="30"/> 
</Setter.Value> 
</Setter> 
</Style> 
<Storyboard x:Key="sbSpin"> 
<DoubleAnimation Duration="0:0:1" From="60" To="100" 
Storyboard. TargetProperty="Height"/> 
<DoubleAnimation Duration="0:0:1" From="0" To="360" 
Storyboard. TargetProperty="RenderTransform. Angle" /> 
</Storyboard> 
</Window. Resources> 
<Grid> 
<Button Content="Spin Me! "> 
<Button. Triggers> 
<EventTrigger RoutedEvent="Button.Click"> 
<EventTrigger.Actions> 
<BeginStoryboard 
Storyboard="{StaticResource sbSpin}"/> 
</EventTrigger.Actions> 
</EventTrigger> 
</Button.Triggers> 
</Button> 
</Grid> 


The background of the window uses a radial gradiant from white to blue. 


The Window Resource lets tag lets us specify more detailed properties for resources. In 
this case we define a style for the button with accessibility to the width, height, and 
RenderTransform.Angle properties. 


We define a Storyboard which lets us add elements that can run simultaneously or 
sequentially (to run sequentially add a BeginTime property). There are two 
DoubleAnimation elements, which is an animation of a value that is a double. The 
animation elapses over O hours, 0 minutes, and 1 second, and varies the height from 60 to 
100. The angle varies similary from 0 to 360 degrees. 


Finally, in the button, we add a Trigger when the button 1s clicked that begins (1.e. runs) 
the storyboard named sbSpin. Note the separation of action code from layout code. 


The end result looks like this: 


Spin Me! 





Imagine how you would write this using Windows Forms... 


We also have a large degree of functionality to present 3D information in XAML, so it is 
worth investigating if you are going to be working with 3D user interfaces. 


